<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{word}}
        <zhang></zhang>
        <newbtn></newbtn>
        <newbtn></newbtn>

    </div>
    <script>
        //组件 组件component的方法 组件名 组件实例
        Vue.component('zhang', {
            template: `<div :style="style">我是冶少</div>`,
            data() {
                return {
                    style: {
                        border: "1px solid red",
                        width: '100px',
                        textAlign: 'center'
                    }
                }
            }
        },);

        Vue.component('newbtn',{
            template:`<div>
                            <zhang></zhang>
                            {{num}}
                            <button @click ='add()'>点赞</button>
                        </div>`,
            data() {
                return{
                    num:0,
                };
            },
            methods:{
                add(){
                    this.num++
                }
            }
            },
        );

        let app = new Vue({
            el:'#app',
            data:{
                word:'这是组件'
            }

        })
    </script>
</body>
</html>